<template>
  <div class="dashboard-container">
    <!-- 第一行：实时监测和统计分析 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="card-header">实时监测</div>
          <div class="chart-container">
            <!-- 这里放置实时监测图表 -->
            <div class="placeholder-chart" id="real-time-chart">实时监测图表区域</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="card-header">统计分析</div>
          <div class="chart-container">
            <!-- 这里放置统计分析图表 -->
            <div class="placeholder-chart" id="analysis-chart">统计分析图表区域</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行：实时路况和信号灯控制 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="card-header">实时路况</div>
          <div class="chart-container">
            <!-- 这里放置实时路况图表 -->
            <div class="placeholder-chart" id="traffic-chart">实时路况图表区域</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <div class="card-header">信号灯控制</div>
          <div class="chart-container">
            <!-- 这里放置信号灯控制图表 -->
            <div class="placeholder-chart" id="signal-chart">信号灯控制区域</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第三行：环境监测 -->
    <!-- <el-row class="mt-20">
      <el-col :span="24">
        <el-card class="table-card">
          <div class="card-header">环境监测</div>
          <div class="table-container" id="tableContainer">
            这里放置滚动表格
            <el-table
              :data="environmentData"
              height="100%"
              style="width: 100%"
              class="auto-scroll-table"
            >
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="name" label="监测项" width="120" />
              <el-table-column prop="value" label="数值" width="100" />
              <el-table-column prop="unit" label="单位" width="80" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{ row }">
                  <el-tag
                    :type="
                      row.status === '异常'
                        ? 'danger'
                        : row.status === '警告'
                        ? 'warning'
                        : 'success'
                    "
                  >
                    {{ row.status }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import * as echarts from 'echarts'
  import { ElLoading } from 'element-plus'

  // 实时监测数据
  const realTimeData = ref({
    xAxis: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00'],
    series: [120, 200, 150, 80, 70, 110, 130]
  })

  // 统计分析数据
  const analysisData = ref({
    categories: ['交通', '环境', '安全', '其他'],
    series: [
      { value: 335, name: '交通' },
      { value: 310, name: '环境' },
      { value: 234, name: '安全' },
      { value: 135, name: '其他' }
    ]
  })

  // 实时路况数据
  const trafficData = ref({
    series: [
      { name: '畅通', value: 60 },
      { name: '缓行', value: 30 },
      { name: '拥堵', value: 10 }
    ]
  })

  // 信号灯控制数据
  const signalData = ref({
    status: ['绿灯', '黄灯', '红灯'],
    count: [30, 10, 5]
  })

  // 环境监测数据
  const environmentData = ref<
    Array<{
      id: number
      name: string
      value: string
      unit: string
      status: string
    }>
  >([])

  // 生成100条模拟数据
  const generateEnvironmentData = () => {
    const types = [
      { name: 'PM2.5', unit: 'μg/m³', normalRange: [0, 50] },
      { name: '温度', unit: '℃', normalRange: [20, 30] },
      { name: '湿度', unit: '%', normalRange: [40, 70] },
      { name: '噪音', unit: 'dB', normalRange: [30, 60] },
      { name: 'CO2', unit: 'ppm', normalRange: [300, 1000] },
      { name: 'SO2', unit: 'μg/m³', normalRange: [0, 150] },
      { name: 'NO2', unit: 'μg/m³', normalRange: [0, 100] }
    ]

    for (let i = 1; i <= 100; i++) {
      const type = types[Math.floor(Math.random() * types.length)]
      const value = Math.floor(
        Math.random() * (type.normalRange[1] - type.normalRange[0]) + type.normalRange[0]
      )
      let status = '正常'
      if (value < type.normalRange[0] * 0.8 || value > type.normalRange[1] * 1.2) {
        status = '异常'
      } else if (value < type.normalRange[0] * 0.9 || value > type.normalRange[1] * 1.1) {
        status = '警告'
      }

      environmentData.value.push({
        id: i,
        name: type.name,
        value: value.toString(),
        unit: type.unit,
        status
      })
    }
  }

  generateEnvironmentData()

  // 初始化图表
  const initCharts = () => {
    // 实时监测图表
    const realTimeChart = echarts.init(document.getElementById('real-time-chart'))
    realTimeChart.setOption({
      xAxis: { type: 'category', data: realTimeData.value.xAxis },
      yAxis: { type: 'value' },
      series: [{ type: 'line', data: [120, 200, 150, 80, 70, 110, 130] }]
    })

    // // 统计分析图表
    const analysisChart = echarts.init(document.getElementById('analysis-chart'))
    analysisChart.setOption({
      tooltip: { trigger: 'item' },
      series: [{ type: 'pie', data: analysisData.value.series }]
    })

    // // 实时路况图表
    const trafficChart = echarts.init(document.getElementById('traffic-chart'))
    trafficChart.setOption({
      tooltip: { trigger: 'item' },
      series: [{ type: 'pie', data: trafficData.value.series }]
    })

    // // 信号灯控制图表
    const signalChart = echarts.init(document.getElementById('signal-chart'))
    signalChart.setOption({
      xAxis: { type: 'category', data: signalData.value.status },
      yAxis: { type: 'value' },
      series: [{ type: 'bar', data: signalData.value.count }]
    })
  }

  const loading = ref(true)

  onMounted(() => {
    const loadingInstance = ElLoading.service({
      lock: true,
      text: '加载中',
      background: 'rgba(0, 0, 0, 0.1)'
    })

    // 模拟数据加载
    setTimeout(() => {
      initCharts()
      loading.value = false
      loadingInstance.close()
    }, 1000)
  })
</script>

<style scoped lang="less">
  .dashboard-container {
    padding: 20px;
    background-color: #f0f2f5;
    min-height: calc(100vh - 60px);

    .mt-20 {
      margin-top: 20px;
    }

    .card-header {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .chart-card,
    .table-card {
      height: 100%;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .chart-container {
      height: 300px;
      background-color: #fff;
      border-radius: 4px;
      padding: 10px;

      .placeholder-chart {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-color: #f5f7fa;
        color: #909399;
        border: 1px dashed #dcdfe6;
        border-radius: 4px;
      }
    }

    .table-container {
      height: 300px;
      overflow: hidden;
      padding: 10px;
      background-color: #fff;
      border-radius: 4px;

      .auto-scroll-table {
        width: 100%;
        height: 100%;

        .el-table__body-wrapper {
          overflow-x: hidden;
        }
      }
    }
  }
</style>
